<template>
  <!-- 竖排商品列表样式 -->
  <view class="item_list">
    <view class="item_box">
      <view v-for="(item,index) in questionList" :key="index" @click="goDetail(item.id, item.goodsId || item.item_id, item)"
        class="item" v-bind:class="{ advertising: item.isAdvertising }">
        <!-- 主图 -->
        <!-- <image :src="item.pic" mode="widthFix" class="main_img" v-bind:class="{ ad_img: item.isAdvertising }"
          :lazy-load="true"></image> -->
        <view class="main_img" :class="{ ad_img: item.line }">
          <ImageLoad :src="item.pic" mode="widthFix"/>
        </view>
        <!-- 非广告位商品介绍 -->
        <view class="controduction" v-if="!item.isAdvertising">
          <view class="title">{{item.dtitle || item.title}}</view>
          <view class="sales" v-if="rankType === 1">近2小时疯抢:<text class="number">{{item.twoHoursSales}}</text>件</view>
          <view class="sales" v-if="rankType === 2">近24小时疯抢:<text class="number">{{item.dailySales}}</text>件</view>
          <view class="tab">
            <!-- 优惠券start -->
            <text class="text coupon_price" v-if="item.couponPrice">{{item.couponPrice}}元券</text>
            <text class="text coupon_price" v-else-if="item.coupon_info">{{calcCouponPrice(item.coupon_info)}}元券</text>
            <!-- 优惠券end -->
            <text class="text item_brand" v-if="item.brandName">{{item.brandName}}</text>
          </view>
          <view class="bottom">
            <!-- 券后价start -->
            <text class="price_box" v-if="item.actualPrice">券后￥<text class="price">{{item.actualPrice}}</text></text>
            <text class="price_box" v-else-if="item.zk_final_price && item.coupon_info">券后<text class="price">￥{{calcFinalPrice(item.zk_final_price, item.coupon_info)}}</text></text>
            <text class="price_box" v-else-if="item.zk_final_price">售价<text class="price">￥{{item.zk_final_price}}</text></text>
            <!-- 券后价end -->
            <!-- <text class="origin_price">￥{{item.originPrice}}</text> -->
          </view>
        </view>
        <button class="buy_btn">立即抢</button>
      </view>

    </view>
  </view>
  </view>
</template>

<script>
  import ImageLoad from '@/pages/pagecomponents/other/imageload'
  export default {
    components: {
      ImageLoad,
    },
    props: {
      questionList: {
        // 图片数组
        type: Array,
        default: () => []
      },
      userInfo: {
        type: Object,
      },
      rankType: {
        // 榜单等级
        type: Number,
        default: 1
      },
    },
    data() {
      return {}
    },
    created() {
      let token = uni.getStorageSync('token')
    },
    methods: {
      goDetail(id, goodsId, item) {
        if (goodsId) {
          // 广告位不存在goosdId
          uni.navigateTo({
            url: `/pages/itemdetail/index?id=${id}&&goodsId=${goodsId}`
          });
        }
      },
      calcCouponPrice(couponInfo) {
        // 计算优惠券价格
        if (couponInfo) {
          return couponInfo.slice(couponInfo.indexOf("减") + 1, couponInfo.length - 1);
        }
      },
      calcFinalPrice(zkFinalPrice, couponInfo) {
        // 计算券后价格
        if (zkFinalPrice && couponInfo) {
          return (zkFinalPrice - couponInfo.slice(couponInfo.indexOf("减") + 1, couponInfo.length - 1)).toFixed(2)
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .item_list {
    .item_box {
      margin-top: 30upx;
      padding: 0 20upx;
      .item {
        position: relative;
        margin-bottom: 20upx;
        width: 710upx;
        height: 240upx;
        background-color: #ffffff;
        box-shadow: 0px 20upx 40upx 0px rgba(0, 0, 0, 0.1);
        .main_img {
          display: inline-block;
          border-radius: 10upx;
          width: 240upx;
          height: 240upx;
          overflow: hidden;
        }
        .ad_img {
          display: inline-block;
          border-radius: 10upx;
          width: 100%;
          height: auto;
          overflow: hidden;
        }
        .controduction {
          width: 450upx;
          margin-left: 20upx;
          display: inline-block;
          vertical-align: top;
          .title {
            width: 430upx;
            height: 50upx;
            line-height: 50upx;
            color: #393939;
            font-size: 30upx;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .sales {
            color: #b1b6bd;
            font-size: 25upx;
            height: 50upx;
            line-height: 50upx;
            .number {
              color: #FF7800;
            }
          }
          .tab {
            height: 50upx;
            line-height: 50upx;
            .text {
              margin-right: 10upx;
              padding: 5upx 10upx;
            }
            .coupon_price {
              color: #f4757e;
              background-color: #feeae9;
            }
            .item_brand {
              color: #9dced7;
              background-color: #edf3f9;
            }
          }
          .bottom {
            height: 90upx;
            line-height: 90upx;
            .price_box {
              color: #FF2B22;
              font-size: 25upx;
              .price {
                font-size: 40upx;
                font-weight: 600;
              }
            }
            .origin_price {
              color: #959595;
              text-decoration: line-through;
            }
          }
        }
        .buy_btn {
          padding: 0;
          color: #fff;
          font-size: 25upx;
          width: 140upx;
          height: 50upx;
          line-height: 50upx;
          border-radius: 40upx;
          position: absolute;
          right: 20upx;
          bottom: 20upx;
          background: linear-gradient(-90deg, rgba(252, 77, 81, 1), rgba(252, 63, 120, 1));
        }
      }
      .advertising {
        width: 100%;
        display: block;
      }
    }
  }
</style>
